<template>
	<view class="content">
		<u-navbar
			title="提现详情" 
			:bg-color="`${mainColor}`"
			fixed 
			placeholder 
			autoBack
			:height="navigationBarHeight"
			:title-style="{color:`${textColor}`, fontSize:'16px', fontWeight:700}"
			:left-icon-color="`${textColor}`"
			v-if="showTitle"/>
		<view class="content-page" v-if="detail.id">
			<view class="item flex-a" v-for="(item, index) in items" :key="index" v-if="!item.show || item.show(detail)">
				<view class="name">
					{{item.label}}：
				</view>
				<view :class="item.active ? 'active' : 'value'">
					<view class="flex-ct" v-if="detail[item.name] != null || item.content">
						<view :class="item.className && item.className(detail)" v-if="item.content">{{item.content(detail)}}</view>
						<view :class="item.className && item.className(detail)" v-else>{{item.money ? '￥' : ''}}{{item.dict ? item.dict[detail[item.name]]: detail[item.name]}}</view>
					</view>
					<view v-else>{{item.default}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getWithdrawDetail } from '@/api';
import { systemInfo } from '@/utils/mixin';

	export default {
		mixins: [systemInfo],
		data() {
			return {
				withdrawId: '',
				detail: {},
				items: [
					{label: '编号', name: 'order_no'},
					{label: '支付方式', name: 'method_name', active: true},
					{label: '支付宝账号', name: 'alipay_account', show: (item) => item.type == 'alipay'},
					{label: '所属银行', content: (item) => {
						return `${item.bank_name}(${item.branch_name})`
					}, show: (item) => item.type == 'bank'},
					{label: '银行卡账号', name: 'card_number', show: (item) => item.type == 'bank'},
					{label: '提现金额', name: 'amount', money: true},
					{label: '手续费', name: 'fee', money: true},
					{label: '订单状态', name: 'status', className: (item) => {
						return {tag: true, success: item.status == 2, error: item.status == 3}
					}, dict: {
						0: '审核中', 1: '转账中', 2: '提现成功', 3: '提现失败'
					}},
					{label: '失败原因', name: 'failed_reason', className: (item) => {error: true}, show: (item) => item.status == 3},
					{label: '驳回原因', name: 'reject_reason', className: (item) => {error: true}, show: (item) => item.is_rejected},
					{label: '处理结果', content: (item) => '资金已退回至账户余额', show: (item) => item.status == 3},
					{label: '提交时间', name: 'create_datetime'},
					{label: '处理时间', name: 'handle_time', show: (item) => item.status != 0}
				]
			}
		},
		onLoad({id}) {
			this.getSystemInfo();
			this.withdrawId = id;
		},
		onShow() {
			this.loadDetail();
		},
		methods: {
			async loadDetail() {
				if (!this.withdrawId) return;
				
				const res = await getWithdrawDetail(this.withdrawId);
				this.detail = res.data;
			}
		}
	}
</script>

<style lang="scss" scoped>
.content-page{
	padding: 0 20px 0;
	font-family: Times New Roman;
	box-sizing: border-box;
}

.item {
    width: 100%;
    min-height: 41px;
    font-size: 14px;
    border-bottom: 1px solid #f1f1f1;
	display: flex;
	align-items: center;
	
	.name {
	    width: 100px;
	    margin-right: 5px;
		text-align: right;
	}
	
	.value {
	    color: #666;
	}
	
	.active {
	    color: #5ac725;
	}
	
	.card_icon {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		margin-right: 4px;
	}
	
	.tag {
		color: #f1a319;
	}
	
	.success {
	    color: #3c9cff;
	}
	
	.error {
	    color: #f56c6c;
	}
}
</style>
